<template>
	<view class="">
		<uni-nav-bar title="补液记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
		<view class="filling">
		  <view class="filling_center">
		    <view class="datas">
		      <uni-datetime-picker
		        v-model="range"
		        type="daterange"
		        :border="false"
		        :clear-icon="false"
		        rangeSeparator="至"
		        @change="change"
		      />
		    </view>
		    <view class="screen" @click="screen">筛选</view>
		  </view>
		  <view class="filling_bottom">
		    <view class="filling_bottoms" v-if="filling" @click="delCar()">
		      <text>{{ filling }}</text>
		      <uni-icons type="closeempty" color="#666" size="18" style="margin-left: 10rpx"></uni-icons>
		    </view>
		  </view>
		</view>
		<scroll-view
		  scroll-y="true"
		  enable-back-to-top
		  @scrolltolower="loadMore"
		  class="scroll-box"
		  :style="{ height: pageHeight + 'px' }"
		>
		 <view class="recodeList" v-for="(item,index) in orderLists" :key='item.id'>
		 	<view class="recodes"><view>时间</view><view>{{item.createtime}}</view></view>
		 	<view class="recodes"><view>出液机</view><view>{{item.fill_name}}</view></view>
		 	<view class="recodes"><view>受液机</view><view>{{item.to_fill_name}}</view></view>
		 	<view class="recodes"><view>下单量</view><view><text>{{item.amount}}</text><text>公斤</text></view></view>
		 	<view class="recodes"><view>实际补液量</view><view><text>{{item.true_amount}}</text><text>公斤</text></view></view>
		 </view>
		  <view v-if="orderLists.length<1" class="fillings" :style="{ height: pageHeight + 'px' }">
		    <image :src="Empty2"></image>
		    <text>暂无订单</text>
		  </view>
		</scroll-view>
	
		<!-- 加注机选择 -->
		<uni-popup ref="popup" type="right" background-color="#fff">
		  <view class="propos" style="width: 670rpx;">
		    <scroll-view scroll-y="true" :style="{height:'81.5vh',marginTop:isH5?'5vh':'8vh'}">
		      <view class="scroll">
		        <view
		          class="scrolls"
		          v-for="item in fillCode"
		          :key="item.id"
		          @click.stop="addCarBy(item)"
		          :style="{ borderColor: filling == item.code ? '#399FFF' : '' }"
		        >
		          <text :style="{ color: filling == item.code ? '#399FFF' : '' }">{{ item.code }}</text>
		          <view class="scrolla" :style="{ display: filling == item.code ? 'flex' : 'none' }">
		            <uni-icons type="checkmarkempty" size="15" color="#fff"></uni-icons>
		          </view>
		        </view>
		        <view class="scrolle" v-if="carLists.length < 1">
		          <image :src="fillder1"></image>
		          <text>暂无加注机</text>
		        </view>
		      </view>
		    </scroll-view>
		    <view class="propos_bottom">
		      <text @click="Reset()">重置</text>
		      <text @click="sureCar()">确定</text>
		    </view>
		  </view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import { errorToast, showToast } from '@/utils/prompt';
	import { isH5 } from '@/utils/platform';
	import { fillder1 } from '@/utils/Static';
	import { toPublish } from '@mqtt';
	import { ref,onMounted,Ref } from 'vue';
	import { fillingList,CapitalDetails } from '@/gql/Infusion';
	import { format, subDays } from 'date-fns';
	import { Empty2} from '@/utils/Static';
	import { getDriverID } from '@/stores/driverID';
	const driver_id = getDriverID();
	// data
	const now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	const daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);
	
	const filling = ref('');
	const carLists=[{id:1,cart_code:'加注机1'},{id:2,cart_code:'加注机2'},{id:3,cart_code:'加注机3'},{id:4,cart_code:'加注机4'}]
	const pageHeight=ref('')
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const orderLists = ref([]);
	
	const fillCode=ref([])//受液机列表
	const receiverfilling: Ref<any> = ref({});//受液机信息
	// refs
	const popup = ref(null);
	onMounted(() => {
	  uni.getSystemInfo({
	    success: function(res) {
	      pageHeight.value = (res.windowHeight - 63).toString();
	    },
	  });
	});
	//获取受液机列表
	receiver()
	function receiver() {
	  const payload = {
	    query: fillingList,
	    variables: {
	      driver_id,
	    },
	  };
	  toPublish('ql/fill/getFillListByCan', payload, (obj: any) => {
	    uni.hideLoading();
	    const { data } = obj;
	    fillCode.value = data.fill_list_by_can;
	  });
	}
	init()
	/**
	 * 获取授液订单列表
	 */
	function init() {
	  isLoading.value = true;
	  const payload = {
	    query: CapitalDetails,
	    variables: {
	      page: currentPage.value,
	      start,
	      end,
	      driver_id,
		  to_fill_id:receiverfilling.value.id
	    },
	  };
	  toPublish(
	    'ql/fill/getFillOrderList',
	    payload,
	    (obj: any) => {
	      const { fill_order_list } = obj.data;
	      isLoading.value = false;
	      orderLists.value = [...orderLists.value, ...fill_order_list.list];
	      lastPage.value = fill_order_list.lastpage;
	    },
	    () => {
	      errorToast('通讯异常');
	      isLoading.value = false;
	    },
	  );
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
	  if (currentPage.value < lastPage.value) {
	    currentPage.value++;
	    init();
	  }
	}
	/**
	 * 调整选择时间
	 */
	function change([sta, en]) {
	  currentPage.value = 1;
	  orderLists.value = [];
	  start = sta;
	  end = en;
	  init();
	}
	/**
	 * 清除选中的加注机信息
	 */
	function delCar(){
		filling.value=''
		// 获取页面信息
		currentPage.value = 1;
		orderLists.value = [];
		init();
	}
	/**
	 * 重置选中的加注机信息
	 */
	function Reset(){
		filling.value=''
		receiverfilling.value=''
	}
	/**
	 * 打开选择加注机弹框
	 */
	function screen() {
	  popup.value.open();
	}
	/**
	 * @param {Object} num 选中的加注机信息
	 */
	function addCarBy(num) {
	  filling.value = num.code;
	  receiverfilling.value=num
	}
	/**
	 * 确定选中的加注机信息
	 */
	function sureCar() {
	  if (!filling.value) {
	    showToast('请选择您要查询的加注机');
	    return;
	  }
	  popup.value.close();
	  // 获取页面信息
	  currentPage.value = 1;
	  orderLists.value = [];
	  init();
	}
</script>
<style scoped lang="less">
	@import url('../Infusion/less/InfusionOrder.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>